<template>
    <Menu :active-name="$router.menuId" theme="dark" width="auto" @on-select="jumpToPage" :open-names="currentOpen">
        <Submenu :name="menu.menuId" v-for="menu in menuList">
            <template slot="title">
                <Icon :type="menu.icon"></Icon>
                {{menu.menuName}}
            </template>
            <MenuItem v-for="sub in menu.children" :name="sub.menuId">
                <Icon :type="sub.icon"></Icon>
                {{sub.menuName}}
            </MenuItem>
        </Submenu>

    </Menu>
</template>

<script>
    import {mapState} from "vuex"

    export default {
        name: "nav_menu",
        data() {
            return {
                currentActive: "",
                currentOpen: [],

            }
        },
        methods: {
            jumpToPage(menuId) {
                this.$router.push({name: menuId})
            },
        },
        computed: mapState({
            menuList: state => state.app.menuList,
        })
    }
</script>

<style scoped>

</style>
